<template>
    <div>
        <el-table :data="nowData" style="width: 100%">
            <el-table-column fixed type="index" label="编号" width="300px">
            </el-table-column>
            <el-table-column label="待审核">
                <template>
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">待审核</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>身份证号: {{ scope.row.IDCard }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit({ _id: scope.row._id, state: 2 })"
                        >通过</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete({ _id: scope.row._id, state: 4 })"
                        >拒绝</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="nowPage"
            :page-sizes="[5, 7, 10, 15]"
            :page-size="getData.pagesize - 0"
            layout="total, sizes, prev, pager, next,jumper"
            :total="nowTotal"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import axios from "../../http/axios.js";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
    "tenants"
);
export default {
    data() {
        return {
            getData: {
                currentpage: 1,
                pagesize: 500,
            },
            nowPage:1,
            oldPage: 1,
            startSize: 0,
            endSize: 5,
            nowSize: 5,
        };
    },
    mounted() {
        this.getTenants();
    },
    methods: {
        async handleEdit(data) {
            await axios({
                url: "/tenants/checkTenants",
                method: "post",
                data,
            });
            this.getTenants();
        },
        async handleDelete(data) {
            await axios({
                url: "/tenants/checkTenants",
                method: "post",
                data,
            });
            this.getTenants();
        },
        ...mapActions(["getTenants"]),
        handleSizeChange(val) {
            
            (this.startSize = 0), (this.endSize = 5);
            (this.oldPage = 1)
            this.endSize += val - 5;
            this.getData.pagesize = val;
            this.nowSize = val;
            // this.getTenants(this.getData);
            console.log(this.endSize,this.startSize);
            
        },
        handleCurrentChange(val) {
            if (val > this.oldPage) {
                this.startSize += this.nowSize*(val-this.oldPage);
                this.endSize += this.nowSize*(val-this.oldPage);
            } else {
                console.log(1);
                this.startSize -= this.nowSize*(this.oldPage-val);
                this.endSize -= this.nowSize*(this.oldPage-val);
            }
            this.oldPage = val;
            this.getData.currentpage = val;
            // this.getTenants(this.getData);
            console.log(this.endSize,this.startSize,val);
        },
    },
    computed: {
        ...mapState(["tenantsData", "total"]),
        nowData() {
            return this.tenantsData
                .filter((elem) => elem.state == 3)
                .slice(this.startSize, this.endSize);
        },
        nowTotal() {
            return this.tenantsData.filter((elem) => elem.state == 3).length;
        },
    },
};
</script>
<style>
.el-table td {
    text-align: center;
}
</style>